<template>
  <div class="main">
    <div class="type" v-if="nodeVal.type !== 'condition'">
      <p class="typeAddAll" :class="nodeVal.type === 'or' ? 'typeAdd' : (nodeVal.type === 'and' ? 'typeAddss' : 'typeAdds')" @click.stop="emit('addNodes',id)"><i class="el-icon-plus"></i></p>
      <el-select placeholder="请选择" v-model="nodeVal.type" class="typeSelAll" :class="nodeVal.type === 'or' ? 'typeSel' : (nodeVal.type === 'and' ? 'typeSelss' : 'typeSels')" :teleported="false">
        <el-option v-for="item in relationshipArr" :key="item.id" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <div class="val" v-else>
      <p class="valAdd" @click.stop="emit('addNodes',id)"><i class="el-icon-plus"></i></p>
      <el-select class="valSel" v-model="nodeVal.name" @change="conditionChange" filterable placeholder="请选择" :teleported="false">
        <el-option v-for="(item,ind) in combDataArr" :key="ind" :label="item" :value="item"></el-option>
      </el-select>
      <el-select class="valSel" v-model="nodeVal.condition" placeholder="请选择" v-if="['Int','Float',''].includes(nodeVal.dataType)" :teleported="false">
        <el-option v-for="item in conditionArrFir" :key="item.id" :label="item.value" :value="item.value"> </el-option>
      </el-select>
      <el-select class="valSel" v-model="nodeVal.condition" placeholder="请选择" v-if="nodeVal.dataType === 'String'" :teleported="false">
        <el-option v-for="item in conditionArrThr" :key="item.id" :label="item.value" :value="item.value"></el-option>
      </el-select>
      <el-select class="valSel" v-model="nodeVal.condition" placeholder="请选择" v-if="nodeVal.dataType === 'Date' || nodeVal.dataType === 'Datetime'" :teleported="false">
        <el-option v-for="item in conditionArrSec" :key="item.id" :label="item.value" :value="item.value"></el-option>
      </el-select>
      <el-input class="txtVal" v-model="nodeVal.value" placeholder="请输入" oninput ="value=value.replace(/[^0-9]/g,'')" v-if="nodeVal.dataType === 'Int'"></el-input>
      <el-input class="txtVal" v-model="nodeVal.value" placeholder="请输入" oninput ="value=value.replace(/[^0-9.]/g,'')" v-if="nodeVal.dataType === 'Float' || nodeVal.dataType === ''"></el-input>

      <el-input class="txtVal" type="text" v-model="nodeVal.value" placeholder="请输入" v-if="nodeVal.dataType === 'String'"></el-input>
      <el-date-picker class="txtVal" v-model="nodeVal.value" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-if="nodeVal.dataType === 'Date'" :teleported="false"></el-date-picker>
      <el-date-picker class="txtVal" v-model="nodeVal.value" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" v-if="nodeVal.dataType === 'Datetime'" :teleported="false"></el-date-picker>
      <p class="delete" @click.stop="emit('delNodes',id)"><i class="el-icon-close"></i></p>
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(['addNodes', 'delNodes'])
const conditionArrFir = [
  { id: 0, value: '>=（大于等于）' },
  { id: 1, value: '>（大于）' },
  { id: 2, value: '<=（小于等于）' },
  { id: 3, value: '<（小于）' },
  { id: 4, value: '=（等于）' },
  { id: 5, value: '!=（不等于）' }
]

const conditionArrSec = [
  { id: 0, value: '<=（日期之前）' },
  { id: 1, value: '>=（日期之后）' }
]

const conditionArrThr = [
  { id: 0, value: '包含字符' },
  { id: 1, value: '等于字符' }
]

const relationshipArr = [
  { id: 0, value: 'and', label: '取交集' },
  { id: 1, value: 'or', label: '取并集' },
  { id: 2, value: 'not', label: '取差集' }
]

const combDataArr = []

let nodeVal = reactive({})
let id = ref(0)

const props = defineProps({
  node: {
    type: Object
  }
})

let { node } = toRefs(props)
console.log(node)
id = node.value.id
nodeVal = node.value.data
onMounted(() => {
  conditionChange(nodeVal.name, false)
})

const conditionChange = (val, type = true) => {
  // this.indexType.forEach((item) => {
  //   if (item.index_name === val) {
  //     this.nodeVal.dataType = item.codomain_type
  //     if (type) {
  //       this.nodeVal.condition = ''
  //       this.nodeVal.value = ''
  //     }
  //   }
  // })
  console.log(val, type)
}

watch(() => nodeVal, (value) => {
  if (value) {
    node = value
  }
}, { deep: true })

</script>

<style lang="scss" scoped>
  .main{
    display:flex;
    .type{
      display: flex;
      .typeAddAll{
        width: 32px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
        border-radius: 2px;
        color: #fff;
        margin: 0;
      }
      .typeAdd{
        background: #2A83EA;
      }
      .typeAdds{
        background: #23DAD9;
      }
      .typeAddss{
        background: #EBA02A;
      }
      .typeSelAll{
        width: 60px;
        height: 32px;
        :deep(.el-input__inner){
          background-color:rgba(235, 160, 42, 0.3);
          border-radius: 2px;
          font-size: 14px;
          font-weight: 600;
          color: #0D2746;
        }
      }
      .typeSel{
        :deep(.el-input__inner){
          background-color:rgba(42, 131, 234, 0.3);
        }
      }
      .typeSels{
        :deep(.el-input__inner){
          background-color:rgba(35, 218, 217, 0.3);

        }
      }
      .typeSelss{
        :deep(.el-input__inner){
          background-color:rgba(235, 160, 42, 0.3);

        }
      }
    }
    .val{
      display: flex;
      .valAdd{
        width: 32px;
        height: 32px;
        background: #193E77;
        border-radius: 2px;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
        color: #fff;
        margin: 0  5px 0 0;
      }
      .valSel{
        // margin: 14px 0 0 4px;
        width: 106px;
        height: 32px;
      }
      .txtVal{
        width: 106px;
      }
      .delete{
        margin: 0;
        width: 32px;
        height: 29px;
        border-radius: 2px;
        border: 1px solid #E46969;
        cursor: pointer;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
        color: #E46969;
        margin-left: 4px;
        i{
          font-size: 20px;
          padding-top: 5px;
        }
      }
    }
    :deep(.el-input__icon){
      line-height: 32px;
    }
  }

</style>
